<template>
  <div class="theme-config-page">
    <el-row :gutter="20">
      <!-- 主题配置 -->
      <el-col :xs="24" :lg="16">
        <el-card>
          <template #header>
            <span class="title">🎨 主题配置</span>
          </template>

          <el-tabs v-model="activeTab">
            <!-- 颜色配置 -->
            <el-tab-pane label="颜色配置" name="colors">
              <el-form label-width="120px">
                <el-form-item label="主色调">
                  <el-color-picker v-model="themeConfig.colors.primary" show-alpha />
                  <span style="margin-left: 10px;">{{ themeConfig.colors.primary }}</span>
                </el-form-item>
                
                <el-form-item label="成功色">
                  <el-color-picker v-model="themeConfig.colors.success" />
                  <span style="margin-left: 10px;">{{ themeConfig.colors.success }}</span>
                </el-form-item>

                <el-form-item label="警告色">
                  <el-color-picker v-model="themeConfig.colors.warning" />
                  <span style="margin-left: 10px;">{{ themeConfig.colors.warning }}</span>
                </el-form-item>

                <el-form-item label="危险色">
                  <el-color-picker v-model="themeConfig.colors.danger" />
                  <span style="margin-left: 10px;">{{ themeConfig.colors.danger }}</span>
                </el-form-item>

                <el-form-item label="信息色">
                  <el-color-picker v-model="themeConfig.colors.info" />
                  <span style="margin-left: 10px;">{{ themeConfig.colors.info }}</span>
                </el-form-item>

                <el-divider />

                <el-form-item label="背景色">
                  <el-color-picker v-model="themeConfig.colors.background" />
                  <span style="margin-left: 10px;">{{ themeConfig.colors.background }}</span>
                </el-form-item>

                <el-form-item label="文字主色">
                  <el-color-picker v-model="themeConfig.colors.textPrimary" />
                  <span style="margin-left: 10px;">{{ themeConfig.colors.textPrimary }}</span>
                </el-form-item>

                <el-form-item label="文字次色">
                  <el-color-picker v-model="themeConfig.colors.textSecondary" />
                  <span style="margin-left: 10px;">{{ themeConfig.colors.textSecondary }}</span>
                </el-form-item>

                <el-form-item label="边框色">
                  <el-color-picker v-model="themeConfig.colors.border" />
                  <span style="margin-left: 10px;">{{ themeConfig.colors.border }}</span>
                </el-form-item>
              </el-form>
            </el-tab-pane>

            <!-- 字体配置 -->
            <el-tab-pane label="字体配置" name="fonts">
              <el-form label-width="120px">
                <el-form-item label="字体家族">
                  <el-select v-model="themeConfig.fonts.family">
                    <el-option label="默认字体" value="'Helvetica Neue', Helvetica, Arial, sans-serif" />
                    <el-option label="苹方" value="'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif" />
                    <el-option label="微软雅黑" value="'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif" />
                    <el-option label="思源黑体" value="'Source Han Sans SC', 'Helvetica Neue', Helvetica, Arial, sans-serif" />
                  </el-select>
                </el-form-item>

                <el-form-item label="基础字号">
                  <el-slider v-model="themeConfig.fonts.baseSize" :min="12" :max="18" :step="1" show-input />
                </el-form-item>

                <el-form-item label="标题字号">
                  <el-slider v-model="themeConfig.fonts.titleSize" :min="16" :max="28" :step="1" show-input />
                </el-form-item>

                <el-form-item label="行高">
                  <el-slider v-model="themeConfig.fonts.lineHeight" :min="1.2" :max="2.0" :step="0.1" show-input />
                </el-form-item>
              </el-form>
            </el-tab-pane>

            <!-- 布局配置 -->
            <el-tab-pane label="布局配置" name="layout">
              <el-form label-width="120px">
                <el-form-item label="菜单宽度">
                  <el-slider v-model="themeConfig.layout.menuWidth" :min="200" :max="300" :step="10" show-input />
                </el-form-item>

                <el-form-item label="圆角大小">
                  <el-slider v-model="themeConfig.layout.borderRadius" :min="0" :max="16" :step="1" show-input />
                </el-form-item>

                <el-form-item label="阴影强度">
                  <el-select v-model="themeConfig.layout.shadowLevel">
                    <el-option label="无阴影" value="none" />
                    <el-option label="轻微" value="light" />
                    <el-option label="中等" value="medium" />
                    <el-option label="强烈" value="strong" />
                  </el-select>
                </el-form-item>

                <el-form-item label="页面边距">
                  <el-slider v-model="themeConfig.layout.padding" :min="10" :max="30" :step="5" show-input />
                </el-form-item>
              </el-form>
            </el-tab-pane>

            <!-- 高级配置 -->
            <el-tab-pane label="高级配置" name="advanced">
              <el-form label-width="120px">
                <el-form-item label="动画效果">
                  <el-switch v-model="themeConfig.advanced.animation" />
                </el-form-item>

                <el-form-item label="渐变背景">
                  <el-switch v-model="themeConfig.advanced.gradient" />
                </el-form-item>

                <el-form-item label="毛玻璃效果">
                  <el-switch v-model="themeConfig.advanced.blur" />
                </el-form-item>

                <el-form-item label="自定义CSS">
                  <el-input v-model="themeConfig.advanced.customCSS" type="textarea" :rows="10" placeholder="/* 自定义CSS代码 */" />
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>

          <div class="config-actions">
            <el-button @click="handleReset">重置</el-button>
            <el-button @click="handleExport">导出配置</el-button>
            <el-button type="primary" @click="handleApply">应用配置</el-button>
            <el-button type="success" @click="handleSaveAsTheme">保存为主题</el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 实时预览 -->
      <el-col :xs="24" :lg="8">
        <el-card>
          <template #header>
            <span class="title">👀 实时预览</span>
          </template>
          <div class="preview-container" :style="getPreviewStyle()">
            <el-card>
              <template #header>
                <span>示例卡片</span>
              </template>
              <p style="margin-bottom: 15px;">这是一段示例文本，用于预览主题效果。</p>
              <div style="display: flex; gap: 10px; margin-bottom: 15px;">
                <el-button type="primary">主按钮</el-button>
                <el-button type="success">成功</el-button>
                <el-button type="warning">警告</el-button>
                <el-button type="danger">危险</el-button>
              </div>
              <div style="display: flex; gap: 10px; margin-bottom: 15px;">
                <el-tag>默认</el-tag>
                <el-tag type="success">成功</el-tag>
                <el-tag type="warning">警告</el-tag>
                <el-tag type="danger">危险</el-tag>
              </div>
              <el-progress :percentage="70" />
            </el-card>
          </div>
        </el-card>

        <!-- 颜色面板 -->
        <el-card style="margin-top: 20px;">
          <template #header>
            <span class="title">🎨 当前配色</span>
          </template>
          <div class="color-palette">
            <div class="palette-item" v-for="(color, key) in themeConfig.colors" :key="key">
              <div class="palette-color" :style="{ background: color }"></div>
              <span class="palette-label">{{ getColorLabel(key) }}</span>
              <span class="palette-value">{{ color }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const activeTab = ref('colors')

const themeConfig = reactive({
  colors: {
    primary: '#409eff',
    success: '#67c23a',
    warning: '#e6a23c',
    danger: '#f56c6c',
    info: '#909399',
    background: '#f5f7fa',
    textPrimary: '#303133',
    textSecondary: '#606266',
    border: '#dcdfe6'
  },
  fonts: {
    family: "'Helvetica Neue', Helvetica, Arial, sans-serif",
    baseSize: 14,
    titleSize: 20,
    lineHeight: 1.5
  },
  layout: {
    menuWidth: 240,
    borderRadius: 4,
    shadowLevel: 'medium',
    padding: 20
  },
  advanced: {
    animation: true,
    gradient: true,
    blur: false,
    customCSS: ''
  }
})

const getColorLabel = (key) => {
  const labels = {
    primary: '主色调',
    success: '成功色',
    warning: '警告色',
    danger: '危险色',
    info: '信息色',
    background: '背景色',
    textPrimary: '主文字',
    textSecondary: '次文字',
    border: '边框色'
  }
  return labels[key] || key
}

const getPreviewStyle = () => {
  return {
    '--el-color-primary': themeConfig.colors.primary,
    '--el-color-success': themeConfig.colors.success,
    '--el-color-warning': themeConfig.colors.warning,
    '--el-color-danger': themeConfig.colors.danger,
    '--el-color-info': themeConfig.colors.info,
    '--el-font-size-base': themeConfig.fonts.baseSize + 'px',
    '--el-border-radius-base': themeConfig.layout.borderRadius + 'px'
  }
}

const handleReset = () => {
  ElMessage.info('主题配置已重置')
}

const handleExport = () => {
  const config = JSON.stringify(themeConfig, null, 2)
  const blob = new Blob([config], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'theme-config.json'
  a.click()
  ElMessage.success('配置已导出')
}

const handleApply = () => {
  ElMessage.success('主题配置已应用！')
}

const handleSaveAsTheme = () => {
  ElMessageBox.prompt('请输入主题名称', '保存主题', {
    confirmButtonText: '保存',
    cancelButtonText: '取消',
    inputPlaceholder: '例如：我的专属主题'
  }).then(({ value }) => {
    if (value) {
      ElMessage.success(`主题 "${value}" 保存成功！`)
    }
  })
}
</script>

<style scoped>
.theme-config-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.config-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #dcdfe6;
}

.preview-container {
  padding: 20px;
  background: var(--el-color-info-light-9, #f5f7fa);
  border-radius: 8px;
}

.color-palette {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.palette-color {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.palette-label {
  flex: 1;
  font-size: 14px;
  color: #606266;
}

.palette-value {
  font-size: 12px;
  color: #909399;
  font-family: monospace;
}
</style>

